<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/plant.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../font/font.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/tran.css">
    <style>
        .yemaxuan {
            background: #4DC3B6 !important;
            opacity: 1;
            border-radius: 4px;
            border: none !important;
            color: #fff !important;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <script src="../lib/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <div class="container-fluid">
        <div class="row">
            <!-- 这是侧边栏 -->
            <div id="kong" class="col-md-2"></div>
            <div id="main_menu" class="col-md-2">
                <ul id="myul">
                    <li id="logoli">
                        <div><span class="iconfont icon-shouyefill"></span><a href="../index.html">首页</a>
                        </div>
                    </li>
                    <li id="have">
                        <div><span class="iconfont icon-tongji"></span>统计</div>
                        <ul>
                            <li><a href="../pages/zx_tongji.html">种植收购统计</a></li>
                            <li><a href="../pages/saleStatistical.html">销售统计</a> </li>
                            <li><a href="../pages/dj03.html">人员统计</a> </li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-zhongzhiguanli"></span>种植养殖</div>
                        <ul>
                            <li><a href="../pages/plant.html">蔬果</a></li>
                            <li><a href="../pages/farming.html">肉类</a></li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-caigou"></span>采购收购</div>
                        <ul>
                            <li><a href="../pages/Supplier_management.html">供应商管理</a> </li>
                            <li><a href="../pages/pick_fruit.html">蔬果</a></li>
                            <li><a href="../pages/pick_meat.html">肉类</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-yunshuzhongwuliu-xianxing"></span>运输</div>
                        <ul>
                            <li><a href="../pages/tran_meat.html">肉类运输</a></li>
                            <li><a href="../pages/tran_ve.html">蔬菜运输</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-xinruku"></span>仓库</div>
                        <ul>
                            <li><a href="../pages/stockIn.html">入库</a></li>
                            <li><a href="../pages/stockOut.html">出库</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-shejishengchan"></span><a href="../pages/production.html">生产</a>
                        </div>
                    </li>
                    <li>
                        <div id="logo"><span class="iconfont icon-xiaoshou"></span>销售</div>
                        <ul>
                            <li><a href="../pages/zx_xiaoshou.html">销售流通</a></li>
                            <li><a href="../pages/online_sho_by.html">网购</a></li>
                            <li><a href="../pages/online_retreate.html">网购-退换记录</a></li>
                            <li><a href="../pages/zx_pima.html">批码管理</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-lajitong"></span><a
                                href="../pages/waste_management.html">废料去向</a></div>
                    </li>
                    <li>
                        <div><span class="iconfont icon-guanliyuan"></span>管理</div>
                        <ul id="secondary">
                            <li><a href="../pages/dj01.html">人员管理</a> </li>
                            <li><a href="../pages/dj02.html">操作日志</a> </li>
                            <li><a href="../pages/board.html">留言板</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id="left_content" class="col-md-10">
                <!-- 这是头 -->
                <nav id="main_headnav">
                    <div class="clear">
                        <div class="navlefspan">
                            <span class="iconfont icon-caidan" id="hidenmenu"></span>
                            <span class="mytitle">食品流通安全管理系统</span>
                        </div>
                        <div class="navrigspan">
                            <span class="iconfont icon-tixing" id="tx"></span>
                            <!-- 头像 -->
                            <img src="../images/shouye/tx.jpg" alt="">
                            <!-- 姓名 -->
                            <span id="tc">退出</span>
                        </div>
                    </div>
                    <div>
                        <!-- 这里写小的头 -->
                    </div>
                </nav>
                <div id="main_content">
                    <div id="mycentent">
                        <div id="box">
                            <div id="main">
                                <p id="mynav"><span>网购</span><span>></span><span class="mycolor2">购买</span></p>
                                <div id="add">
                                    <span>购买记录</span>
                                </div>
                                <div id="search" class="row ">
                                    <span>订单号：</span><input type="text" placeholder="请输入" id="sel_w_id">
                                    <span>发货状态：</span><select name="" id="sel_w_met">
                                        <option value="全部">全部</option>
                                        <option value="已付款">已付款</option>
                                        <option value="退货">退货</option>
                                    </select>
                                    <button onclick="sel()">查询</button>
                                    <button onclick="reset()">重置</button>
                                </div>
                                <table class="table table-bordered" id="mytable">
                                    <thead>
                                        <tr>
                                            <th>订单编号</th>
                                            <th>商品名称</th>
                                            <th>用户昵称</th>
                                            <th>数量</th>
                                            <th>价格</th>
                                            <th>购物状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                            <div id="paging" class="clear">
                                <div>
                                    跳至
                                    <input type="text" placeholder="5" onblur="tiao()" id="tiao">
                                    页
                                </div>
                                <div>
                                    <select name="" id="gaiyema" onchange="gaiyema()">
                                        <option value="10">10条/页</option>
                                        <option value="15">15条/页</option>
                                        <option value="20">20条/页</option>
                                    </select>
                                </div>
                                <div class="clear" id="yema">
                                </div>

                            </div>
                        </div>
                        <div id="edit">
                            <!-- <span>商品图片：<img id="prc"></img></span> -->
                            <span>销售编号：<input id="xsid" disabled class="edut_input"></input></span>
                            <span>商品编号：<input id="pnum" disabled class="edut_input"></input></span>
                            <div>
                                <span><input style="display: none;"></input></span>
                                <span>用户名称：<input id="username"></input></span><br>
                                <span>发货地址：<input id="address"></input></span>
                            </div>
                            <div>
                                <span>销售价格：<input id="charge"></input></span><br>
                                <span>购买数量：<input id="shop_num"></input></span><br>
                                <span>用户电话：<input id="tel"></input></span>
                            </div>
                            <button onclick="editReturn()" class="return">返回</button>
                            <button onclick="editqueding()" class="quedingxiugai">确定修改</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 查看模态框 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal2">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">查看数据</h4>
                </div>
                <div class="modal-body">
                    <span>商品图片：<img id="cha_prc"></img></span><br>
                    销售编号：<input type="" id="cha_xsid" class="form-control" disabled><span></span>
                    <div class="chakan_div">商品名称: <input type="text" id="cha_shopname" disabled>
                        商品编号: <input type="text" id="cha_shopid" disabled></div>
                    <div class="chakan_div"> 用户名称: <input type="text" id="cha_username" disabled>
                        电话号码: <input type="text" id="cha_tel" disabled></div>
                    <div class="chakan_div"> 发货地址: <input type="text" id="cha_address" disabled>
                        销售地点: <input type="text" id="cha_didian" disabled></div>
                    <!-- 到达仓库: <input type="text" id="cha_house" class="form-control" disabled> -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <!-- <button type="button" class="btn btn-primary querentianjia">确认添加</button> -->
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- 删除模态框 -->
    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="exampleModalLabel">你确认要删除这些数据信息吗</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <p>
                                删除后将无法恢复，你还要继续吗？
                            </p>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-md-2 col-md-offset-8">
                            <button type="button" class="btn-default motaidelbtn motaidelbtn del_btn delquxiao"
                                data-dismiss="modal">取消</button>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn-primary  motaidelbtn motaidelbtn del_btn delqueding"
                                data-dismiss="modal" onclick="quedingshanchu()">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/index.js">
    </script>
</body>
<!-- <script src="../js/tran/tran.js"></script> -->
<script>
    var count = 8;
    var page = 1;
    var yemashu
    var del_id
    var edit_id
    var chakan_id
    var tableData
    var total
    var kindnum = `销售方式='网购'`
    var sqlkind = `SELECT * FROM z_sale 
    LEFT JOIN production ON z_sale.p_id=production.p_id
    LEFT JOIN out_stock ON production.p_ck_id=out_stock.out_stock_id
    LEFT JOIN in_stock ON in_stock.in_stock_id=out_stock.rk_id
    LEFT JOIN transport ON in_stock.trans_id=transport.t_id
    LEFT JOIN house ON transport.t_warehouse=house.house_id
    LEFT JOIN tran_person ON transport.t_person=tran_person.p_id
    LEFT JOIN purchase ON transport.t_shopid=purchase.id
    LEFT JOIN goods ON purchase.p_item=goods.g_id
    LEFT JOIN class2 ON class2.c2_id=goods.g_class
    LEFT JOIN class1 ON class1.c1_id=class2.class1_id`
    window.onload = function () {
        let x = $("#box").width()
        $('#box').width(x)
    }
    sel()
    //     function showData() {
    //         $.ajax({
    //             url: '/get/tran',
    //             data: {
    //                 sql1: sqlkind + `
    // WHERE ${kindnum} LIMIT ${(page - 1) * count},${count}`,
    //                 sql2: sqlkind + ` WHERE ${kindnum}`
    //             },
    //             success: (res) => {
    //                 if (res.error) {
    //                     console.log(error);
    //                 } else {
    //                     tableData = res.data
    //                     total = res.total.length
    //                     // console.log(tableData.length)
    //                     // console.log(total)
    //                     showTable();
    //                 }
    //             }
    //         })
    //     }
    function showTable() {
        $('tbody').html('')
        for (let i = 0; i < tableData.length; i++) {
            $('tbody').append(`
                    <tr data-id=${tableData[i].z_id}>
                        <td>${tableData[i].销售单号}</td>
                        <td>${tableData[i].c2_name}</td>
                        <td>${tableData[i].用户名称}</td>
                        <td>${tableData[i].数量}</td>
                        <td>${tableData[i].销售价}</td>
                        <td>${tableData[i].状态}</td>
                        <td>
                        <a href="javascript:;" onclick="chakan(this)">查看</a>
                        <a href="javascript:;" class="del"  onclick="del(this)">删除</a>
                        <a href="javascript:;" class="edit" onclick="edit(this)">修改</a>
                    </td>
                    </tr>
                    `)
        }
        //渲染页码
        $('#yema').html('');
        if (Math.ceil(total / count) != 1) {
            $('#yema').append(
                ` <div onclick="shang()"> <p><</p> </div>`
            )
            for (let i = 1; i <= Math.ceil(total / count); i++) {
                if (page == i) {
                    $('#yema').append(`
                        <div class="yemaxuan yema">${i}</div>
                        `)
                } else {
                    $('#yema').append(`
                        <div class="yema">${i}</div>
                        `)
                }
            }
            $('#yema').append(
                ` <div onclick="xia()"> <p>></p> </div>`
            )
        }
        let yema = document.querySelectorAll('#yema .yema')
        // console.log(yema.length)
        yemashu = yema.length
    }
    //改变每个页面的条数
    function gaiyema() {
        count = parseInt($('#gaiyema').val())
        sel()
    }
    //上一页
    function shang() {
        // console.log(123)
        if (page != 1) {
            page--
            sel()
        }
    }
    // 下一页
    function xia() {
        if (page < yemashu) {
            page++
            sel()
            // console.log(tableData);
        }
    }
    //跳转页面
    function tiao() {
        console.log($('#tiao').val())
        if (yemashu >= $('#tiao').val() && 0 < $('#tiao').val()) {
            page = $('#tiao').val()
            sel()
        }
    }
    // 筛选
    function sel() {
        // $('#sel_t_per').val()
        // console.log($('#sel_t_per').val());
        console.log($('#sel_w_id').val());
        if ($('#sel_w_id').val() == '') {
            if ($('#sel_w_met').val() == '全部') {
                // console.log(123);
                $.ajax({
                    url: '/get/tran',
                    data: {
                        sql1: sqlkind + `
                WHERE ${kindnum} LIMIT ${(page - 1) * count},${count}`,
                        sql2: sqlkind + `
                    WHERE ${kindnum}`
                    },
                    success: (res) => {
                        if (res.error) {
                            console.log(res.error)
                        } else {
                            tableData = res.data
                            total = res.total.length
                            showTable()
                        }
                    }
                })
            }
            else {
                $.ajax({
                    url: '/get/tran',
                    data: {
                        sql1: sqlkind + `
            WHERE ${kindnum} AND 状态='${$('#sel_w_met').val()}' LIMIT ${(page - 1) * count},${count}`,
                        sql2: sqlkind + `
                WHERE ${kindnum} AND 状态='${$('#sel_w_met').val()}'`
                    },
                    success: (res) => {
                        if (res.error) {
                            console.log(res.error)
                        } else {
                            tableData = res.data
                            total = res.total.length
                            showTable()
                        }
                    }
                })
            }
        }
        if ($('#sel_w_id').val() != '') {
            if ($('#sel_w_met').val() == '全部') {
                // console.log(123);
                $.ajax({
                    url: '/get/tran',
                    data: {
                        sql1: sqlkind + `
                    WHERE ${kindnum} AND 销售单号='${$('#sel_w_id').val()}' LIMIT ${(page - 1) * count},${count}`,
                        sql2: sqlkind + `
                    WHERE ${kindnum} AND 销售单号='${$('#sel_w_id').val()}'`
                    },
                    success: (res) => {
                        if (res.error) {
                            console.log(res.error)
                        } else {
                            tableData = res.data
                            // console.log(tableData)
                            total = res.total.length
                            showTable()
                        }
                    }
                })
            }
            else {
                $.ajax({
                    url: '/get/tran',
                    data: {
                        sql1: sqlkind + `
            WHERE ${kindnum} AND 销售单号='${$('#sel_w_id').val()}' AND 状态='${$('#sel_w_met').val()}' LIMIT ${(page - 1) * count},${count}`,
                        sql2: sqlkind + `
                WHERE ${kindnum} AND 销售单号='${$('#sel_w_id').val()}' AND 状态='${$('#sel_w_met').val()}'`
                    },
                    success: (res) => {
                        if (res.error) {
                            console.log(res.error)
                        } else {
                            tableData = res.data
                            total = res.total.length
                            showTable()
                        }
                    }
                })
            }
        }
    }
    //重置
    function reset() {
        // console.log($('#sel_t_per').val());
        $('#sel_w_id').val("")
        $('#sel_w_met').val('全部')
        sel()
    }
    // 页面跳转
    $('#yema').on('click', '.yema', function () {
        page = parseInt($(this).text())
        // console.log(123)
        sel()
    })
    //修改
    let box = document.getElementById('box')
    let editdiv = document.getElementById('edit')
    let charge = document.getElementById('charge')
    let username = document.getElementById('username')
    let address = document.getElementById('address')
    let shop_num = document.getElementById('shop_num')
    let xsid = document.getElementById('xsid')
    let tel = document.getElementById('tel')
    let pid
    function edit(obj) {
        // let prc = document.getElementById('prc')
        // console.log(prc)
        // let ming = document.getElementById('ming')
        // let kind = document.getElementById('kind')
        // let pro = document.getElementById('pro')
        let pnum = document.getElementById('pnum')
        // let pnweightum = document.getElementById('weight')
        edit_id = $(obj).parents('tr').attr('data-id');
        // console.log(edit_id);
        box.style.display = 'none'
        editdiv.style.display = 'block'
        $.ajax({
            url: '/cha/tran_ve',
            methed: 'get',
            data: {
                sql: sqlkind + `
            WHERE z_id='${edit_id}'`
            },
            success: (res) => {
                if (res.error) {
                    console.log(error);
                } else {
                    console.log(res.data)
                    xsid.value = res.data[0].销售单号
                    charge.value = res.data[0].销售价
                    username.value = res.data[0].用户名称
                    address.value = res.data[0].发货地址
                    shop_num.value = res.data[0].数量
                    tel.value = res.data[0].用户手机号
                    pnum.value = res.data[0].p_num
                }
            }
        })
    }
    function editReturn() {
        box.style.display = 'block'
        editdiv.style.display = 'none'
        sel()
    }
    function editqueding() {
        $.ajax({
            url: '/update/tran',
            methed: 'get',
            data: {
                sql: `UPDATE z_sale SET 用户名称="${username.value}",发货地址="${address.value}",数量="${shop_num.value}",用户手机号="${tel.value}",销售价="${charge.value}" WHERE 销售单号="${xsid.value}"`,
            },
            success: (res) => {
                if (res.error) {
                    console.log(res.error)
                } else {
                    alert(res)
                }
            }
        })
    }
    function del(obj) {
        del_id = $(obj).parents('tr').attr('data-id');
        // console.log(del_id);
        $('#exampleModal2').modal('toggle')
    }
    function chakan(obj) {
        chakan_id = $(obj).parents('tr').attr('data-id');
        $('#myModal2').modal('toggle')
        let cha_prc = document.getElementById('cha_prc')
        let cha_xsid = document.getElementById('cha_xsid')
        let cha_shopname = document.getElementById('cha_shopname')
        let cha_shopid = document.getElementById('cha_shopid')
        let cha_username = document.getElementById('cha_username')
        let cha_tel = document.getElementById('cha_tel')
        let cha_address = document.getElementById('cha_address')
        let cha_didian = document.getElementById('cha_didian')
        $.ajax({
            url: '/cha/tran_ve',
            methed: 'get',
            data: {
                sql: sqlkind + `
            WHERE z_id='${chakan_id}'`
            },
            success: (res) => {
                if (res.error) {
                    console.log(error);
                } else {
                    // console.log(res.data[0]);
                    cha_prc.src = res.data[0].g_pic
                    cha_xsid.value = res.data[0].销售单号
                    cha_shopname.value = res.data[0].c2_name
                    cha_username.value = res.data[0].用户名称
                    cha_tel.value = res.data[0].用户手机号
                    cha_address.value = res.data[0].发货地址
                    cha_didian.value = res.data[0].销售地点
                    // car.value = res.data[0].p_carid
                    // pro.value = res.data[0].p_pro
                    cha_shopid.value = res.data[0].p_num
                    // cha_time.value = res.data[0].t_time
                }
            }
        })
    }
    //删除
    function quedingshanchu() {
        $.ajax({
            url: '/del/tran_ve',
            method: 'post',
            data: {
                sql: `delete from z_sale where z_id="${del_id}"`
            },
            success: (res) => {
                console.log(res);
                if (res.error) {
                    alert(res)
                } else {
                    alert(res);
                    showData();
                }
            }
        })
    }
</script>

</html>